<template>
    <!-- 页面公共头部 -->
    <el-header>
        <div class="header">
            <h3>51手机贷管理平台</h3>
            <p>
                <span>系统管理员</span>
                <el-button type="success" @click="editPassword = true" size="mini">修改密码</el-button>
                <el-dialog title="修改密码" :visible.sync="editPassword" width="40%" :before-close="editPasswordClose">
                    <edit-password></edit-password>
                    <span slot="footer" class="dialog-footer">
        <el-button @click="editPassword = false">取 消</el-button>
        <el-button type="primary" @click="editPassword = false">确 定</el-button>
      </span>
                </el-dialog>
                <el-button type='danger' size="mini">退出</el-button>
            </p>
        </div>
    </el-header>
</template>

<script>
    import editPassword from './comm/editPassword.vue'
    export default {
        data() {
            return {
                editPassword: false
            }
        },
        methods: {
            editPasswordClose(done) {
                done()
            }
        },
        components: {
            'edit-password': editPassword
        }
    }
</script>

<style scoped>
    .el-header {
        padding-left: 80px;
        width: 100%;
        height: 80px !important;
        color: white;
        background: url('../images/logo.png') left center no-repeat;
        background-color: #1B2235;
        background-size: contain;
    }
    .el-button--mini,
    .el-button--mini.is-round {
        padding: 5px;
    }
    .el-button--success {
        background-color: #009688;
        border-color: #009688;
    }
    .el-button--danger {
        background-color: #F44336;
        border-color: #F44336;
    }
    h3 {
        font-weight: 300;
        margin-bottom: 5px;
    }
    span {
        font-size: 14px;
    }
    .header {
        padding: 10px;
    }
</style>
